<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        <%- movie.title %>
    </title>
    <%- include common %>
        <style>
            .mv-movie {
                margin-top: 20px;
                box-sizing: border-box;
                padding: 0 10px;
            }

            .item-box {
                border-bottom: 1px solid #666;
                margin-bottom: 10px;
            }

            .box-one {
                display: flex;
                justify-content: space-between;
            }

            .movie-box {
                box-sizing: border-box;
                border-right: 2px solid #999;
                border-left: 2px solid #999;
            }

            .movie-box h2 {
                margin-bottom: 30px;
            }

            .img-box {
                height: 500px;
                text-align: center;
            }

            .img-box img {
                height: 100%;
            }

            .movie-text {
                padding: 0 20%;
            }
        </style>
</head>

<body>
    <%- include('head',{title:'comment',username:username })%>
        <div class="container">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 movie-box">
                        <h2 class="text-success text-center"> 当前电影: <%- movie.title %>
                        </h2>
                        <div class="mv-item">
                            <div class="list-box">
                                <div class="img-box">
                                    <img src="<%- movie.images.large.replace(/img7/,'img3') %>" alt="">
                                </div>
                                <div class="movie-text">
                                    <h4 class="text-success">
                                        <%- movie.title%>
                                    </h4>
                                    <p>年份: <%- movie.year%>
                                    </p>
                                    <p>导演: <%- movie.directors[0].name %>
                                    </p>
                                    <p>评分: <%- movie.rating.average%>
                                    </p>
                                    <p>分类: <%- movie.genres %>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-warning" onclick="history.go(-1)">返回</button>
                    </div>
                    <div class="col-md-6">
                        <h2 class="text-primary text-center"> 当前电影的评论</h2>
                        <% result.forEach((item,idx)=>{ %>
                            <div class="item-box">
                                <div class="box-one">
                                    <p class="text-info">
                                        <%- item.username %>
                                    </p>
                                    <p class=" text-primary table-time">
                                        <%- item.time %>
                                    </p>
                                </div>
                                <div>
                                    <p>标题:</p>
                                    <p class="text-danger">
                                        <%- item.title %>
                                    </p>
                                </div>
                                <div class="text-success">
                                    <p>内容:</p>
                                    <p>
                                        <%- item.content %>
                                    </p>
                                </div>
                            </div>
                            <% }) %>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $.each($(".table-time"), function (_, item) {
                var date = new Date($(item).text() * 1);
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var seconds = date.getSeconds();
                $(item).text(year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds);
            })
        </script>
</body>

</html>